<template>
  <div>
    <Card dis-hover>
      <div class="page-body">
        <Form ref="queryForm" :label-width="90" label-position="left" inline>
          <!-- <Row :gutter="16">
            <Col span="8">
              <FormItem :label="L('Keyword')+':'" style="width:100%">
                <Input v-model="pagerequest.filterText" :placeholder="L('CompanyName')"></Input>
              </FormItem>
            </Col>
          </Row>-->
          <Row>
            <Button
              @click="create"
              icon="md-add"
              type="primary"
              v-if="hasPermission('Pages.Roles.Create')"
            >{{L('Add')}}</Button>
            <!-- <Button icon="ios-search" @click="getpage" class="toolbar-btn">{{L('Find')}}</Button> -->
          </Row>
        </Form>
        <div class="margin-top-10">
          <i-table
            row-key="id"
            :loading="loading"
            :columns="columns"
            :no-data-text="L('NoDatas')"
            border
            :data="list"
          ></i-table>

          <!-- <Page
            show-sizer
            class-name="fengpage"
            :total="totalCount"
            class="margin-top-10"
            @on-change="pageChange"
            @on-page-size-change="pagesizeChange"
            :page-size="pageSize"
            :current="currentPage"
          ></Page>-->
        </div>
      </div>
    </Card>
    <create-company
      v-model="createModalShow"
      :permissionTree="companyTree"
      @save-success="saveSuccess"
    ></create-company>
    <edit-company v-model="editModalShow" :permissionTree="companyTree" @save-success="saveSuccess"></edit-company>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import PageRequest from "@/store/entities/page-request";
import CreateCompany from "./create-company.vue";
import EditCompany from "./edit-company.vue";

class PageCompanyRequest extends PageRequest {
  filterText: string = "";
}

@Component({
  components: { CreateCompany, EditCompany }
})
export default class Companys extends AbpBase {
  //=============================变量=============================
  pagerequest: PageCompanyRequest = new PageCompanyRequest();
  createModalShow: boolean = false;
  editModalShow: boolean = false;
  columns = [
    {
      title: this.L("CompanyName"),
      key: "name",
      tree: true
    },
    {
      title: this.L("principalsName"),
      key: "principalsName"
    },
    {
      title: this.L("principalsTel"),
      key: "principalsTel"
    },
    {
      title: this.L("principalsEmail"),
      key: "principalsEmail"
    },
    {
      title: this.L("imgUrl"),
      key: "imgUrl"
    },
    {
      title: this.L("Actions"),
      key: "Actions",
      width: 250,
      render: (h: any, params: any) => {
        var btus = [];

        if (this.hasPermission("Pages.Company.Edit")) {
          var btu = h(
            "Button",
            {
              props: {
                type: "primary",
                size: "small"
              },
              style: {
                marginRight: "5px"
              },
              on: {
                click: () => {
                  this.$store.commit("company/edit", params.row);
                  this.edit();
                }
              }
            },
            this.L("Edit")
          );
          btus.push(btu);
        }
        if (this.hasPermission("Pages.Company.Delete")) {
          var btu = h(
            "Button",
            {
              props: {
                type: "error",
                size: "small"
              },
              on: {
                click: async () => {
                  this.$Modal.confirm({
                    title: this.L("Tips"),
                    content: this.L("DeleteCompanyConfirm"),
                    okText: this.L("Yes"),
                    cancelText: this.L("No"),
                    onOk: async () => {
                      await this.$store.dispatch({
                        type: "company/delete",
                        data: params.row
                      });
                      await this.getpage();
                    }
                  });
                }
              }
            },
            this.L("Delete")
          );
          btus.push(btu);
        }
        return h("div", btus);
      }
    }
  ];

  companyTree = []; // 公司树 数据
  //===========================计算属性=============================
  get list() {
    return this.$store.state.company.list;
  }
  get loading() {
    return this.$store.state.company.loading;
  }
  get pageSize() {
    return this.$store.state.company.pageSize;
  }
  get totalCount() {
    return this.$store.state.company.totalCount;
  }
  get currentPage() {
    return this.$store.state.company.currentPage;
  }
  //==================================方法=============================
  create() {
    this.createModalShow = true;
  }
  edit() {
    this.editModalShow = true;
  }
  pageChange(page: number) {
    this.$store.commit("company/setCurrentPage", page);
    this.getpage();
  }
  pagesizeChange(pagesize: number) {
    this.$store.commit("company/setPageSize", pagesize);
    this.getpage();
  }
  async saveSuccess() {
    this.getpage();
    this.getCompanyTree();
  }
  async getpage() {
    this.pagerequest.maxResultCount = this.pageSize;
    this.pagerequest.skipCount = (this.currentPage - 1) * this.pageSize;
    await this.$store.dispatch({
      type: "company/getAllTree",
      data: this.pagerequest
    });
    console.log(this.list);
    console.log("this");
  }
  async getCompanyTree() {
    var req = await this.$store.dispatch({
      type: "company/getCompanyTree"
    });
    this.companyTree = [req];

    console.log(this.companyTree);
    console.log("saveSuccess");
  }

  async created() {
    this.getpage();
    this.getCompanyTree();
  }
}
</script>